<template>
	<view class="ai">
		<view class="ai-chat">
			<scroll-view scroll-y class="scroll-Y" :scroll-into-view="targetId" scroll-with-animation="true">
				<view class="list" v-for="(opt,index) in arr" :key="opt.id" :id="opt.id">
					<view class="list-item">
						<view class="chat-bot" v-if="opt.role=='chatbot'">{{opt.text}}</view>
						<view class="mine" v-else>{{opt.text}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="ai-input">
			<input @confirm="getInputFn" v-model="message" class="inp" type="text" placeholder="请输入您的问题">
			<view class="btn" @click="getInputFn">发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				targetId: "",
				message: "",

				arr: [{
						role: 'mine',
						text: "我说的话",
						id: 12
					},
					{
						role: "chatbot",
						text: "ai说的话",
						id: 13
					},
					{
						role: "chatbot",
						text: "ai说的话",
						id: 131
					},
					{
						role: "chatbot",
						text: "ai说的话",
						id: 132
					},
					{
						role: "chatbot",
						text: "ai说的话",
						id: 133
					},
					{
						role: "chatbot",
						text: "ai说的话",
						id: 134
					},
					{
						role: "chatbot",
						text: "ai说的话",
						id: 136
					},
					{
						role: "chatbot",
						text: "ai说的话",
						id: 135
					},
					{
						role: "chatbot",
						text: "ai说的话",
						id: 1361
					},
					{
						role: "chatbot",
						text: "ai说的话",
						id: 1352
					},
					{
						role: "chatbot",
						text: "ai说的话",
						id: 1363
					},
					{
						role: "chatbot",
						text: "ai说的话",
						id: 13556
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			scrollTo(id) {
				this.targetId = id
				// 下次DOM更新后重置（可选）
				// setTimeout(() => this.targetId = '', 300)
			},
			getInputFn() {
				let id = "item" + "_" + Math.random().toString().slice(2);
				let message = this.message;
				let obj = {
					role: 'mine',
					text: message,
					id: id
				}
				this.arr.push(obj);
				this.scrollTop = 999999;
				this.message = "";
				this.scrollTo(id)
			},
		}
	}
</script>

<style lang="scss">
	@import "../../static/scss/variable.scss";

	.ai {
		padding: $padd;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 88rpx;
		left: 0;
		box-sizing: border-box;
	}

	.ai-chat {
		width: 100%;
		height: calc(100% - 300rpx);
		background-color: #f0f0f0;
		padding: 10rpx 20rpx;
		box-sizing: border-box;

		scroll-view {
			height: 100%;
		}

		::-webkit-scrollbar {
			display: none;
		}

		.list-item {
			width: 100%;
			display: flex;
			flex-direction: column;

			.chat-bot {
				padding: 10rpx 20px;
				background-color: #fff;
				margin: 10rpx 0rpx;
				align-self: flex-start;
			}

			.mine {
				padding: 10rpx 20px;
				background-color: #fff;
				margin: 10rpx 0rpx;
				align-self: flex-end;
			}
		}
	}

	.ai-input {
		width: 100%;
		height: 100rpx;
		background-color: #f0f0f0;
		margin-top: 10rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		display: flex;

		.inp {
			width: calc(100% - 100rpx);
			height: 80rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding-left: 20rpx;
		}

		.btn {
			width: 100rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>